<!DOCTYPE html>
<html lang="ch" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div th:fragment="commentList">
    <!--循环读取所有评论列表-->
    <div class="comment" th:each="comment : ${comments}">
        <span th:text="${comment?.id}">默认ID</span>
        <span th:text="${comment.nickname}">评论用户的昵称</span>
        <span th:text="${comment.content}">评论内容</span>
    </div>
</div>
<!--提交留言的表单-->
<div id="comment-container">
    <input type="hidden" name="blog.id" th:value="${blog.id}">
    <div>
        <!--输入评论内容的区域-->
        <textarea name="content" placeholder="请输入评论信息..."></textarea>
    </div>

    <input type="text" name="nickname" placeholder="如何称呼您" >
    <button type="button">发布</button>
</div>
<script>
    function postData() {
        //使用ajax的方式 向Controller提交表单
        $("#comment-container").load("[[@{/comments}]]",{
            "blog.id" : $("[name='blog.id']").val(),
            "nickname": $("[name='nickname']").val(),
            "content" : $("[name='content']").val()
        },function (responseTxt, statusTxt, xhr) {  //回调函数
            //提交表单之后，调用clearContent()方法  会清理掉之前表单填写的东西
            clearContent();
        });
    }
    function clearContent() {
        $("[name='nickname']").val("");
        $("[name='content']").val("");
    }
</script>

</body>
</html>